<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>可自由扩展的表情插件，随便放什么图片都可以</title>
    <link rel="stylesheet" href="">
    <style>
    #chatbox {
        margin: 200px auto 0px;
        width: 50%;
    }

    #emoji {
        width: 50px;
        font-size: 2em;
        cursor: pointer;
        float: left;
    }

    #send {
        width: 50px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        background-color: #66f3f1;
        color: #fff;
        float: right;
        cursor: pointer;
        padding: 0px;
        margin-right: -6px;
    }

    #result {
        clear: both;
        min-height: 50px;
        padding-top: 30px;
    }
    /*下面是表情的一些样式，可自行修改*/

    .emoji-box {
        overflow: hidden;
        width: 20%;
        position: absolute;
        border: 1px solid #ccc;
        z-index: 9998;
        background: #fff;
        border-radius: 5px;
    }

    em.tip {
        content: '';
        width: 0px;
        height: 0px;
        border-width: 10px;
        border-style: solid;
        border-color: transparent transparent #ccc transparent;
        position: absolute;
        z-index: 99999;
    }

    em.tip2 {
        content: '';
        width: 0px;
        height: 0px;
        border-width: 10px;
        border-style: solid;
        border-color: transparent transparent #fff transparent;
        position: absolute;
        z-index: 99999;
    }

    .emoji-box>.emoji-btn-box {
        border-bottom: 1px solid #ccc;
    }

    .emoji-box>.emoji-btn-box>span {
        min-width: 50px;
        text-align: center;
        height: 30px;
        line-height: 30px;
        display: inline-block;
        padding: 2px 10px;
        cursor: pointer;
        font-size: 1em;
        font-weight: bold;
        color: #ccc;
    }

    .emoji-box>ul.emoji-ul {
        padding: 0px;
        margin: 0px;
        width: 100%;
    }

    .emoji-box>ul.emoji-ul>li.emoji-li {
        border: 1px solid #fff;
        list-style: none;
        float: left;
    }

    .emoji-box>ul.emoji-ul>li.emoji-li:HOVER {
        border: 1px solid blue;
    }
    </style>
</head>

<body>
    <div id="chatbox">
        <textarea cols="100" rows="50" id="content" style="width: 100%;height:100px;resize: none;overflow:auto;" placeholder="来输入点东西吧"></textarea>
        <div id="emoji">😄</div>
        <div id="send">发送</div>
        <div id="result" contenteditable="true"></div>
    </div>
    <script src="js/jquery-1.10.2.js"></script>
    <script src="js/jquery.emoji.js"></script>
    <script type="text/javascript">
    $(function() {
        /*表情初始化
          content_el: 输入框的位置
        		list: 下的属性详解
        			name		-- 分类名称
        			code 		-- 分类的表情编码，与其他分类不可重复
        			path 		-- 图片路径
        			suffix		-- 图片的后缀
        			max_number	-- 图片的最大个数
        */
        $("#emoji").emoji({
            content_el: "#content",
            list: [{
                    name: "QQ表情",
                    code: "qq_",
                    path: "img/qq/",
                    suffix: ".gif",
                    max_number: 91
                },
                {
                    name: "贴吧表情",
                    code: "tieba_",
                    path: "img/tieba/",
                    suffix: ".jpg",
                    max_number: 50
                },
                {
                    name: "QQ表情",
                    code: "koukou_",
                    path: "img/QQtouxiang/",
                    suffix: ".gif",
                    max_number: 120
                }
            ]
        });
        $("#send").click(function() {
            var content = $("#content").val();
            content = replace_em(content);
            $("#result").html(content);
            $("#content").val('');
        });
    })
    //表情格式替换
    function replace_em(str) {
        str = str.replace(/\</g, '&lt;');
        str = str.replace(/\>/g, '&gt;');
        str = str.replace(/\n/g, '<br/>');
        str = str.replace(/\[qq_([0-9]*)\]/g, "<img src='img/qq/$1.gif' />");
        str = str.replace(/\[tieba_([0-9]*)\]/g, "<img src='img/tieba/$1.jpg'  />");
        str = str.replace(/\[koukou_([0-9]*)\]/g, "<img src='img/QQtouxiang/$1.gif'  />");
        return str;
    }
    </script>
</body>

</html>